<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.ball{width: 15px;height: 15px;background-color: red;border-radius: 50%;}
	</style>
</head>
<body>
	<div id="app">
		<input type="button" value="快到碗里来" @click="flag=!flag">
		<transition
			@before-enter="beforeEnter"
  			@enter="enter"
  			@after-enter="afterEnter"
		>
			<div v-if="flag" class="ball"></div>
		</transition>
	</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
	var app = new Vue({
		el:'#app',
		data:{flag:false},
		methods:{
			// beforeEnter 表示动画入场前，此时，动画尚未开始，可以在 beforeEnter 中，设置元素开始动画之前的起始样式
			// 设置小球开始动画之前的，起始位置
			beforeEnter(el){
				el.style.transform = "translate(0, 0)"
			},
			enter(el, done){
				// 这句话，没有实际的作用，但是，如果不写，出不来动画效果
				// 可以认为 el.offsetWidth 会强制动画刷新
				el.offsetWidth
				// enter 表示动画 开始之后的样式，这里可以设置小球完成动画之后的，结束状态
				el.style.transform = "translate(150px, 450px)"
				el.style.transition = 'all 1s ease'
				// 这里的done,其实就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
				done()
			},
			afterEnter(el){
				// 动画完成之后，会调用 afterEnter
				this.flag = ! this.flag
			}
		}
	})
</script>
</body>
</html>